<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020-06-30
  Time: 17:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="${bathPath }">
    <title>Spark考核</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" href="css/mainStyle.css" type="text/css" media="all">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
</head>
<body>
<ul>
    <li><a href="index.jsp">电影列表</a></li>
    <li><a class="active" href="/ScoreServlet">电影平均分</a></li>
</ul>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 85%;height:85%; margin-left:8%;margin-top:5%;"></div>
<%--第二个图：--%>
<div id="main2" style="width: 85%;height:85%; margin-left:8%;margin-top:5%;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));


    //第一个图的数据：
    var typeData = [];//电影类型
    var maleData = [];
    var femaleData = [];
    //第二个图的数据：
    var academic = [];
    var artist = [];
    var clerical = [];
    var college = [];
    var customer = [];
    var executive = [];
    var farmer = [];
    var homemaker = [];
    var K12 = [];
    var lawyer = [];
    var other = [];
    var programmer = [];
    var sales = [];
    var scientist = [];
    var selfEmployed = [];
    var technician = [];
    var tradesman = [];
    var unemployed = [];
    var writer = [];
    var moviesType = [];//电影类型
    //初始化数据
    $.ajax({
        type: "POST",
        url: "/ScoreServlet",
        dataType: 'json',
        async: false,
        success: function (result) {
            // alert("1---" + JSON.stringify(result));
            // console.log(JSON.stringify(result));
            typeData = result[0].typeData;
            maleData = result[1].maleData;
            femaleData = result[1].femaleData;
            //第二个图的数据：
            academic = result[2].academic;
            artist = result[2].artist;
            clerical = result[2].clerical;
            college = result[2].college;
            customer = result[2].customer;
            executive = result[2].executive;
            farmer = result[2].farmer;
            homemaker = result[2].homemaker;
            K12 = result[2].K12;
            lawyer = result[2].lawyer;
            other = result[2].other;
            programmer = result[2].programmer;
            sales = result[2].sales;
            scientist = result[2].scientist;
            selfEmployed = result[2].selfEmployed;
            technician = result[2].technician;
            tradesman = result[2].tradesman;
            unemployed = result[2].unemployed;
            writer = result[2].writer;
            moviesType = result[3].moviesType;
        }
    })
    //第一个图：
    option = {
        color: ['#71a1ce', '#eb8d6f'],
        title: {
            text: '电影平均分柱状图——按用户性别和电影类型划分',
            x: 'left',                 // 水平安放位置，默认为左对齐
            y: 'top'                 // 垂直安放位置，默认为全图顶端
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: typeData
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '男',
                type: 'bar',
                barGap: 0,
                data: maleData
            },
            {
                name: '女',
                type: 'bar',
                data: femaleData
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //第二个图：
    option2 = {
        color: ['#71a1ce', '#eb8d6f', '#ac7744', '#da64eb',
            '#eb5a4d', '#3c29eb', '#434348', '#adebad',
            '#4cc2ce', '#9f63eb', '#227b10', '#833a57',
            '#78473c', '#12dd56', '#903eeb', '#eb2687',
            '#162b54', '#91194c', '#58ebb5'],
        title: {
            text: '电影平均分柱状图——按用户职业和电影类型划分',
            x: 'left',                 // 水平安放位置，默认为左对齐
            y: 'top'                 // 垂直安放位置，默认为全图顶端
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: moviesType
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'academic/educator',
                type: 'bar',
                barGap: 0,
                data: academic
            }, {
                name: 'artist',
                type: 'bar',
                barGap: 0,
                data: artist
            }, {
                name: 'clerical/admin',
                type: 'bar',
                barGap: 0,
                data: clerical
            }, {
                name: 'college/grad student',
                type: 'bar',
                barGap: 0,
                data: college
            }, {
                name: 'customer service',
                type: 'bar',
                barGap: 0,
                data: customer
            }, {
                name: 'executive/managerial',
                type: 'bar',
                barGap: 0,
                data: executive
            }, {
                name: 'farmer',
                type: 'bar',
                barGap: 0,
                data: farmer
            }, {
                name: 'homemaker',
                type: 'bar',
                barGap: 0,
                data: homemaker
            }, {
                name: 'K-12 student',
                type: 'bar',
                barGap: 0,
                data: K12
            }, {
                name: 'lawyer',
                type: 'bar',
                barGap: 0,
                data: lawyer
            }, {
                name: 'other',
                type: 'bar',
                barGap: 0,
                data: other
            }, {
                name: 'programmer',
                type: 'bar',
                barGap: 0,
                data: programmer
            }, {
                name: 'sales/marketing',
                type: 'bar',
                barGap: 0,
                data: sales
            }, {
                name: 'scientist',
                type: 'bar',
                barGap: 0,
                data: scientist
            }, {
                name: 'self-employed',
                type: 'bar',
                barGap: 0,
                data: selfEmployed
            }, {
                name: 'technician/engineer',
                type: 'bar',
                barGap: 0,
                data: technician
            }, {
                name: 'tradesman/craftsman',
                type: 'bar',
                barGap: 0,
                data: tradesman
            }, {
                name: 'unemployed',
                type: 'bar',
                barGap: 0,
                data: unemployed
            }, {
                name: 'writer',
                type: 'bar',
                barGap: 0,
                data: writer
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
</script>
</body>
</html>

